<template>
  <div class="main">
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">个人信息</a></el-breadcrumb-item>
        <el-breadcrumb-item>个人信息修改</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form_containor">
      <el-card class="card2">
        <h3>个人信息展示</h3>
        <div class="person">
          <img src="../../assets/img/headport.jpg" alt="" />
          <div>
            <p>
              <el-tag size="mini" type="primary">姓名：{{ personList.name }}</el-tag
              ><el-tag size="mini" type="warning">年龄：{{ personList.age }}</el-tag
              ><el-tag size="mini" type="info">性别：{{ personList.sex }}</el-tag>
            </p>
            <p>
              <el-tag size="mini" type="danger"
                >医院：{{ personList.hospital }}</el-tag
              ><el-tag size="mini" type="success"
                >科室：{{ personList.department }}</el-tag
              ><el-tag size="mini">工号：{{ personList.jobNumber }}</el-tag>
            </p>
          </div>
        </div>
        <div class="message">
          <el-tag size="mini" type="success">门诊地址：</el-tag>-----{{
            personList.adress
          }}
        </div>
        <div class="message">
          <el-tag size="mini">职位：</el-tag>-----{{ personList.position }}
        </div>
        <div class="message">
          <el-tag size="mini" type="danger">电话：</el-tag>-----{{
            personList.phone
          }}
        </div>
        <div class="message">
          <el-tag size="mini" type="info">邮箱：</el-tag>-----{{ personList.email }}
        </div>
        <div><el-tag size="mini" type="warning">个人简介</el-tag></div>
        <textarea v-model="personList.personalProfile"></textarea>
      </el-card>
    </div>
  </div>
</template>

<script>
// import _ from 'lodash'
export default {
  data () {
    return {
      personList: [],
      pensonList1Rules: {
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            min: 7,
            max: 13,
            message: '长度在 7 到 13 个字符',
            trigger: 'blur'
          }
        ],
        emaile: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入诊室地址', trigger: 'blur' }
        ],
        message: [
          { required: true, message: '请输入个人简介', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getDoctorInfo()
  },
  mousted () {},
  methods: {
    editConfirm () {
      console.log(this.pensonList1.telephone, this.pensonList2.telephone)
    },
    getDoctorInfo () {
      const jobNumber = window.sessionStorage.getItem('jobNumber')
      console.log(jobNumber)
      this.$http
        .get('/server/doctor/doctorInfo/' + jobNumber)
        .then((res) => {
          if (res.status !== 200) {
            return this.$message.error('未查到工号，请及时联系管理员')
          }
          this.personList = res.data
        })
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.bread {
  width: 100%;
  height: 40px;
  padding: 20px 20px;
  line-height: 20px;
  box-sizing: border-box;
}
.form_containor {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.form_containor .el-card {
  margin: 60px 80px;
  border-radius: 8px;
}
.form_containor .card1 {
  width: 400px;
  height: 600px;
}
.form_containor .card1 .el-form {
  width: 100%;
  height: 100%;
  text-align: center;
}
.form_containor .card2 {
  width: 400px;
  height: 600px;
}
.form_containor .card2 h3 {
  text-align: center;
}
.card2 .person {
  height: 110px;
  padding: 10px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.card2 .person img {
  width: 90px;
  height: 90px;
  border-radius: 5px;
  border: 1px solid #f40;
  box-sizing: border-box;
}
.card2 .person div {
  width: 280px;
  height: 90px;
  margin-left: 10px;
}
.card2 .person div p {
  height: 50%;
}
.card2 .person div p .el-tag {
  margin: 0 6px;
}
.card2 .message {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-bottom: 2px solid lightskyblue;
  box-sizing: border-box;
  margin-top: 30px;
  font-size: 14px;
}
.card2 textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #f40;
  margin-top: 10px;
  font-size: 14px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: gold;
  padding: 5px 8px;
  box-sizing: border-box;
}
.card2 div:nth-child(7) {
  margin-top: 10px;
}
</style>
